<template>
    <!-- 注：这个页面 不用了       里面的一些变量 和全局 变量 没有维护 再次使用会报错 -->
    <div class="side-bar" :style="{width: sideBarWidth + 'px'}">
        <!--<el-button @click="$store.commit('menu/TOGGLE_SIDE_BAR_COLLAPSE')">按我</el-button>-->
        <el-scrollbar wrap-class="side-bar-scrollbar-wrap" view-class="side-bar-scrollbar-view">
            <!--   mode="horizontal" -->
            <!--   menu-trigger="click" -->
            <!-- <div  @mouseleave.self="handleLeave"  @mouseover.self ="handleOver"> -->
            <el-menu
                :collapse-transition="false"
                :mode="setMode"
                menu-trigger="click"
                :show-timeout="200"
                :collapse="true"
                :default-active="$route.path"
                active-text-color="#409EFF"
                :unique-opened="true"
                @select="handleSelect"
                @open="handleOpen"
                :isCollapse="isCollapse"
                :sideBarWidth="sideBarWidth"
                id="sidebarMenu"
                ref="setMenuRef"
                :class="{'el-menu-vertical-unfiop':isCollapse,'el-menu-vertical-fiop':!isCollapse,'el-menu-vertical-demo':true}"
            >
                <side-bar-item v-for="router in menuList" :key="router.id" :item="router"></side-bar-item>
            </el-menu>
            <!-- </div> -->
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
// import SideBarItem from './SideBarItem.vue';
import SideBarItem from './SideBarItem.vue';
import { HEAD_MENU_WIDTH, HEAD_MENU_UNFOLD_WIDTH } from 'utils/Contants';

export default {
    name: 'SideBar',
    components: { SideBarItem },
    props: {
        // 菜单展开时的宽度
        width: {
            type: Number,
            default: HEAD_MENU_UNFOLD_WIDTH,
        },
        // 菜单收缩时的宽度
        collapseWidth: {
            type: Number,
            default: HEAD_MENU_WIDTH,
        },
        // 从外部接收的菜单数据
        menuList: {
            type: Array,
            required: true
        }
        , mode: 'horizontal'
    },
    data() {
        return {
            muenLeftIndex: [],
            isCutMenu: '',
        }
    },
    mounted() {
    },
    computed: {
        ...mapGetters([
            'sideBar',
            'sideBarCollapse',
            'visitedViews',  // 缓存的小tabs
            'isActiveMenu',//当前菜单top
        ]),

        isCollapse() {
            return this.sideBarCollapse;
        },
        /*
        menuList() {
          return this.sideBar;
        },*/
        sideBarWidth() {
            return this.isCollapse ? this.collapseWidth : this.width;

        },
        setMode() {
            return this.isCollapse ? "vertical" : "horizontal";
        }
    },
    methods: {
        // 判断是否要保留tabs
        handleSelect(key, keyPath) {
            // 修改 当前选择的主菜单
            // 单一的没有子集菜单 直接切换 不保留数据
            console.log(key, 'key');
            console.log(keyPath, 'keyPath');
            if (keyPath.length < 2) {
                // this.$store.commit('menu/UPDATE_ACTIVE_MENU', );
                // 当切换 侧边栏菜单 清空小tab
                // 添加判断 当连续点击两次当前菜单 不删除tabs数据
                const isAmend = this.visitedViews.some(items => {
                    if (items.title === key) {
                        return true;
                    }
                });
                //isAmend =false  是visitedViews里没有同名的组件

            } else {

                this.$router.push(key)
                if (this.isActiveMenu !== keyPath[0]) {
                    // this.$store.commit('menu/UPDATE_ACTIVE_MENU', );
                }
            };
        },
        // 切换侧边栏的收缩展开状态
        toggleSidBar() {
            this.$store.commit('menu/TOGGLE_SIDE_BAR_COLLAPSE');
            // 记录侧边导航的宽度
            this.$store.commit("SET_SIDE_BAR_WIDTH", this.sideBarWidth.replace('px', ''));
        },

        handleOpen(key, keyPath) {
            // console.log(key,'key');
            // console.log(keyPath,'keyPath');
            // const popper = document.getElementsByClassName('navMenu_head_item');
            // const Ids =document.getElementById('app');
            this.muenLeftIndex.push(key);
            // that.myFunc(that);
            app.addEventListener('click', this.myFunc);
        },
        // 关闭menu方法
        closePopper() {

            const elMenu = this.$refs['setMenuRef'];
            if (elMenu) {
                this.muenLeftIndex.forEach(item => {
                    elMenu.close(item);
                })
                //最后清空数组
                this.muenLeftIndex = [];
                app.removeEventListener('click', this.myFunc)
            }

        },
        // 绑定事件 判断点击事件 的点击位置 const elMenu = that.$refs['menuSmell'];
        myFunc(event) {
            const idDom = document.getElementById('sidebarMenu');
            const e = event || window.event;
            if (idDom && !idDom.contains(e.target) && this.muenLeftIndex.length > 0) {
                this.closePopper();
            }
        },
    }
};
</script>

<style lang="scss">
.side-bar {
    .side-bar-scrollbar-wrap {
        /* max-height: 94vh; */
    }
}
</style>
